<script setup lang="ts" name="InviteFriend">
import userinfo from "@/store/userinfo";
import { copy } from "@/utils";

const { t } = useI18n();

const piniaUserinfo: any = userinfo();
const url = window.location.host;
const images = reactive({
  dividingLine: new URL(
    "@/assets/images/Recommend/dottedLine.png",
    import.meta.url
  ).href,
});

const promotionUrl = computed(() => {
  return `${import.meta.env.DEV ? 'http' : 'https'}://${url}/login?type=signUp&code=${piniaUserinfo.userinfo?.user?.promotionCode}`;
});


</script>

<template>
  <DetailHeader :title="t('invite.test4')" :isNeedBackIcon="true" />
  <div class="inviteFriendPage">
    <div class="topContent">
      <div class="inviteType">{{t('invite.test4')}}：</div>
      <div class="qrCode">
        {{t('invite.test5')}}
      </div>
      <div class="qrCode">
        {{t('invite.test6')}}
      </div>
    </div>
    <div class="bottomContent">
      <div class="qrCodeBg">
        <div>{{t('invite.test7')}}</div>
        <div><QrcodeVue :value="promotionUrl" :size="160" level="H" id="picture" /></div>
      </div>
      <img :src="images.dividingLine" alt="" class="dividingLine" />
      <div class="inviteCode">
        <div class="link">
          <div class="title">
            {{t('invite.test8')}}
            <div>
              {{ promotionUrl }}
            </div>
          </div>
          <Iconfont
            name="icon-icon_copy"
            color="#FF2D55"
            size="20"
            @click="copy(promotionUrl)"
          />
        </div>
        <div class="link code">
          <div class="title">
            {{t('invite.test9')}}
            <div>{{ piniaUserinfo.userinfo.user?.promotionCode }}</div>
          </div>
          <Iconfont
            name="icon-icon_copy"
            color="#FF2D55"
            size="20"
            @click="copy(piniaUserinfo.userinfo.user?.promotionCode)"
          />
        </div>
      </div>
      <div class="haveInvited">
        <div>{{t('invite.test10')}}</div>
        <div>
          {{ piniaUserinfo.userinfo.user?.promotionNumber }} <span> {{ t('invite.test11') }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("./index.scss");
</style>
